<script setup name="choosegoods">
import { ref } from "vue"
import { getGoodsList } from "@/api/goods"
import { useInitTable } from "@/composables/useCommon"

// 解构公用方法
const { searchForm, tableData, loading, currentPage, total, toast, limit, tableRef, getData, multiSelectionIds, handleSelectionChange } = useInitTable({
  searchForm: { title: "", tab: "all", category_id: null },
  getList: getGoodsList,
  onGetList: res => {
    tableData.value = res.list
    total.value = res.totalCount
  }
})

// 显示商品选择
const showDialog = ref(false)
const callbackFunction = ref()

// 显示商品选择
const open = (callback = null) => {
  callbackFunction.value = callback
  showDialog.value = true
}
// 提交
const submit = () => {
  if (typeof callbackFunction.value === "function") {
    callbackFunction.value(multiSelectionIds.value)
  }
  close()
}
// 取消
const close = () => (showDialog.value = false)

defineExpose({ open })
</script>

<template>
  <el-dialog center destroy-on-close title="商品选择" v-model="showDialog" width="84%" top="3vh" :show-close="false" :modal="false" :close-on-press-escape="false">
    <el-table ref="tableRef" height="64vh" :data="tableData" stripe style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="26" />

      <el-table-column label="商品" align="center" width="270">
        <template #default="{ row }">
          <div class="goods-info">
            <el-image :src="row.cover" fit="cover" :lazy="true" />
            <div class="goods-info-title">
              <p>{{ row.title }}</p>
              <p>分类:{{ row.category ? row.category.name : "未分类" }}</p>
              <p>创建时间：{{ row.create_time }}</p>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="总库存" prop="stock" align="center" width="66" />

      <el-table-column label="价格(元)" prop="stock" align="center">
        <template #default="{ row }">
          <span class="min_price">￥{{ row.min_price }}</span>
          <el-divider direction="vertical" />
          <span class="price">￥{{ row.min_oprice }}</span>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="暂无数据" :image-size="200" />
      </template>
    </el-table>
    <div class="choose-pagination">
      <el-pagination background small layout="prev, pager, next" :total="total" :current-page="currentPage" :page-size="limit" :hide-on-single-page="total < 11" @current-change="getData" />
    </div>
    <div class="footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.goods {
  &-info {
    display: flex;
    align-items: center;
    .el-image {
      width: 50px;
      height: 50px;
      border-radius: 4px;
      margin-right: 6px;
    }
    &-title {
      flex: 1;
      text-align-last: left;
      :nth-child(n + 2) {
        color: rgba(156, 163, 175, 1);
        font-size: 12px;
      }
      &-price {
        color: rgba(107, 114, 128, 1);
        font-size: 12px;
      }
    }
  }
}
.min_price {
  color: rgba(244, 63, 94, 1);
  font-size: 14px;
}

.price {
  color: rgba(107, 114, 128, 1);
  font-size: 12px;
}
.choose-pagination {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}
.footer {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>
